<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
  var $=(function(){
       var ajax=function(url,callback){
            var xhr=new XMLHttpRequest();
            xhr.open("GET",url,true);
            xhr.send("");
            xhr.onreadystatechange=function(){
              if(xhr.readyState==4&&xhr.status==200){
                    callback(JSON.parse(xhr.responseText));
              }
            }
       }
       return {
         http:ajax    
        }
    })();

    //1.数据如何去获取  http ajax
    //2.数据获取以后 如何绑定到页面中 
    //3.first  ------jsx
     
    var styles={
       div:{
          width:'100%',
          minHeight:'20rem',
          overflow:'hidden'
       },
       cxt:{
          width:'100%',
          height:'5rem',
          borderBottom:'1px solid #acacac',
          display:'flex',justifyContent:'space-around',
          alignItems:'center'
       },
       img:{
          width:"4rem",height:'4rem'
       },
       span:{
         fontSize:'1.2rem'
       }
    }
    var s={
      getA:function(){
         alert("hello a");
      },
      getB:function(){
         alert("hello b");
      }
    }
    var ListView=React.createClass({
        //2.1 设置组件数据源 请求地址
        mixins:[s],
        getDefaultProps:function(){
           return{
             url:'http://127.0.0.1:3000/query'
           }
        },
        //2.2 设置默认状态 得到数据放在状态里面 
        getInitialState:function(){
            return{
              result:[]
            }
        },
       componentWillMount:function(){
           console.log("this is will mount");
           var _this=this;
           $.http(this.props.url,function(data){
                //console.log(data);
                _this.setState({result:data});
           });
        },
        render:function(){
           var template=[];
           var _result=this.state.result.result;
           if(_result){
            for(var i=0;i<_result.length;i++){
               template.push(<ListChild name={_result[i]}/>);
             }
           }
          
           return(
              <div onClick={this.getA} style={styles.div}>
                  {template}
              </div>
           );
        }
    });
   var ListChild=React.createClass({
      mixins:[s],
       render:function(){
          console.log("child comp");
          console.log(this.props.name);
          return(
            <div style={styles.cxt}>
                    <img onClick={this.getB} src={this.props.name.goodsImg} style={styles.img}/>
                      <span style={styles.span}>
                        {this.props.name.goodsName}
                      </span>
             </div>
          );
       }
   });
   ReactDOM.render(<ListView/>,document.getElementById('app'));
    

  // 父子组件嵌套方式 
  //1.让父组件 去获取数据
  //2.让子组件只是渲染数据模版
  //3.都需要在父组件循环子组件叠加到全局数组里面 数组嵌套在页面

    
</script>
</body>
</html>